<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./vue.js"></script>
  <!-- <script src="./vue@2.6.js"></script> -->
  <title>Document</title>
</head>

<body>

  <button onclick="handleClick()">set</button>

  <div>
    <p style="white-space:pre; font-weight: 700;">
      注意，Watcher的存储虽然是逻辑关系，但是其实际上嵌套关系，渲染watcher > 计算属性watcher
      因为计算属性的watcher是在render函数里get触发才会调用watcher.get把当前的watcher推到watchers的栈中
      那么什么时候调用watcher？在渲染watcher进行更新的时候调用，此时已经走到了渲染watcher的get方法，也就是传入的_update(_render())
      此时再在watcher.get内调用_render，所以在计算属性触发其get前，已经存在了渲染watcher，那么在计算属性的get内
      第一次渲染一定会走到对应的data内数据的get,此时Dep的target就是计算属性的watcher,此时进行收集watcher,计算属性的watcher就会被收集，watcher也会拿到所有的依赖dep
      此后，取值完成，watchers的栈会弹出计算属性watcher（栈中还剩渲染watcher），并将渲染watcher指向Dep.target，
      此时对计算属性的watcher的所有dep进行遍历，全部进行依赖收集，收集Dep.target，也就是计算属性get内每次收集栈中的上一个watcher
      如果又多个计算属性，每次走完get之后都会弹出watchers栈，再遍历计算属性依赖的所有dep，收集渲染watcher，此时会重复收集，之前写的set去重就生效了</p>
  </div>

  <!-- 目前没有写匹配注释的东西，注释会出问题 -->
  <div style="color: rgb(131, 0, 0); height: 100%;" id="app">
    <div id="fqm1" style="background-color: rgb(133, 133, 133); padding: .625rem;" key="12315">{{ fqmyysjjd }}</div>
    <div id="fqm2" style="background-color: rgb(133, 133, 133); padding: .625rem;" key="1231">{{ fqmyysjjd }}</div>
    <div id="fqm3" style="background-color: rgb(133, 133, 133); padding: .625rem;" key="1235">{{ fqmyysjjd }}</div>
    <div id="fqm4" style="background-color: rgb(133, 133, 133); padding: .625rem;" key="1215">{{ fqmyysjjd }}</div>
    <div id="fqm5" style="background-color: rgb(133, 133, 133); padding: .625rem;" key="1315">{{ fqmyysjjd }}</div>
    <div id="fqm6" style="background-color: rgb(133, 133, 133); padding: .625rem;" key="2315">{{ jj.fqm }}</div>
  </div>

</body>

<!-- dom在script前 -->
<script>

  let vm = new Vue({
    data() {
      return {
        jj: {
          yy: "yysjjd",
          fqm: "fqm",
          dx: "fqmsjjddx",
          obj: {
            yy: "yysjjd",
            fqm: "fqm",
          },
          arr: ["fqm", "yysjjd"]
        },
        fqm: [1, 2, 3, 4, { fqm: "fqmyysjjd" }, [[1]]]
      }
    },
    computed: {
      // fqmyysjjd() {
      //   console.log("fqqwfmwqm")
      //   return this.jj.fqm + this.jj.yy
      // },
      fqmyysjjd1() {
        return this.jj.fqm + this.jj.yy
      },
      fqmyysjjd: {
        get() {
          console.log("computed")
          return this.jj.fqm + this.jj.yy
        },
        set(newValue) {
          console.log(newValue)
        }
      },
    },
    el: "#app"
  })

  function handleClick() {
    vm.jj.fqm = "Fqm"
    console.log(document.querySelector('#fqm6').innerHTML)
    vm.$nextTick(() => { console.log(document.querySelector('#fqm6').innerHTML) })

    // 改变计算属性,触发计算属性set
    vm.fqmyysjjd = "fqw"
  }

</script>

</html>

<style>
  html {
    height: 100%;
  }

  body {
    height: 100%;
  }
</style>